<template>
  <div>
    <a-upload draggable action="/" :custom-request="customRequest" :show-file-list="false">
      <template #upload-button>
        <slot name="tips"></slot>
      </template>
    </a-upload>
  </div>
</template>

<script lang="ts" setup>
import { watch } from 'vue'
import type { RequestOption, UploadRequest } from '@arco-design/web-vue';
import { ref } from 'vue';
const props = defineProps({
  isSuccess: Boolean,
  process: Number
});
watch(
  () => props.process,
  (newVal) => {
    schedule.value = newVal;
  }
);
const schedule = ref(0);
const CHUNK_SIZE = 1 * 1024 * 1024; // 2MB
import { GetFileChunkWithSHA256 } from '@/util/file';
import type { file_mergeType } from '@/api/newfile/file_type';
import * as api from '@/api/newfile/file';
import axios from 'axios';
const emit = defineEmits(['upload']);
const fileName = ref('')
const customRequest = async (option: RequestOption): Promise<UploadRequest> => {
  const { fileItem } = option;
  fileName.value = fileItem.name
  const data = await GetFileChunkWithSHA256(fileItem.file!, CHUNK_SIZE, schedule);
  let obj = {
    file_sha_256: data.FileSha256,
    file_size: data.FileSize,
    split_count: data.FileChunk.length
  };
  console.log(data);
  let res = await api.file_upload(obj);

  if (res.data.upload_addr.length !== data.FileChunk.length) {
    console.log('服务返回的上传地址数量和本地chunk数量不一致');
    return {};
  }

  interface PartDataItem {
    etag: string;
    partNumber: number;
  }
  let partData: PartDataItem[] = [];
  let totalLength = data.FileChunk.length;
  for (let i = 0; i < totalLength; i++) {
    let chunkData = data.FileChunk[i];
    let chunkUploadAddr = res.data.upload_addr[i];
    await axios.put(chunkUploadAddr, chunkData).then((res) => {
      console.log(res.headers);
      let etag: string = res.headers.etag;
      let md5 = data.FileChunkHash.get(i + 1);
      etag = etag.split('"').join('');
      if (etag !== md5) {
        console.log(etag, md5);
        throw new Error('服务端返回的分片 md5 和已有的不同,数据校验错误');
      }
      partData.push({
        etag: etag,
        partNumber: i + 1
      });
    });
  }
  let margeData = {
    file_name: fileItem.name,
    file_sha256: res.data.file_sha256,
    part_data: partData,
    upload_id: res.data.upload_id
  } as file_mergeType;
  let margeres = await api.file_merge(margeData);
  emit('upload', fileItem.name, res.data.file_sha256, true);
  console.log('合并文件返回值', margeres);
  return {
    abort() {}
  };
};
const handleDel = () => {
  fileName.value = ''
  emit('upload', '', '', false, 0);
}
</script>

<style lang="less" scoped>
:deep(.arco-progress-line-wrapper, .arco-progress-steps-wrapper) {
  position: relative;
  margin-top: 30px;
}
:deep(.arco-progress-line-text) {
  position:absolute;
  width: 100%;
  height: 16px;
  margin-left: 0;
}
:deep(.arco-progress-status-success .arco-progress-line-text .arco-icon) {
  color: #A3B0CC;
  font-size: 16px;
}
.progress-box {
  position: absolute;
  left: 0;
  top: -14px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #465A80;
    span {
      margin-left: 5px;
    }
    
  }
  &-num {
    padding-right: 15px;
  }
}
.pic-list {
  display: flex;
  height: 32px;
  line-height: 32px;
  margin-top: 8px;
  :deep(.arco-icon) {
    color: #A3B0CC;
    font-size: 16px;
  }
  &-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F7F9FC;
    padding-left: 8px;
    span {
      font-size: 14px;
      color: #465A80;
      margin-left: 5px;
    }
    .success {
      margin-right: 8px;
      :deep(.arco-icon) {
        color: #34C94F;
      }
    }
  }
  .del {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
